import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import styles from './Login.module.css';

const Login = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');
  const navigate = useNavigate();

  const handleSubmit = (e) => {
    e.preventDefault();
    setIsLoading(true);
    setError('');
    
    // 模拟登录请求
    setTimeout(() => {
      // 验证账号密码
      if (username === 'admin' && password === 'admin123') {
        // 保存用户信息（模拟）
        localStorage.setItem('userToken', 'fake-token');
        localStorage.setItem('username', username);
        setIsLoading(false);
        // 登录成功后跳转到仪表盘
        navigate('/');
      } else {
        setIsLoading(false);
        setError('用户名或密码错误');
      }
    }, 1500);
  };

  return (
    <div className={styles.loginContainer}>
      <div className={styles.loginBackground}>
        <div className={styles.shapes}>
          <div className={`${styles.shape} ${styles.shape1}`}></div>
          <div className={`${styles.shape} ${styles.shape2}`}></div>
          <div className={`${styles.shape} ${styles.shape3}`}></div>
          <div className={`${styles.shape} ${styles.shape4}`}></div>
        </div>
      </div>
      
      <div className={styles.loginForm}>
        <div className={styles.formHeader}>
          <h1>管理系统</h1>
          <p>欢迎回来，请登录您的账户</p>
        </div>
        
        {error && <div className={styles.errorMessage}>{error}</div>}
        
        <form onSubmit={handleSubmit}>
          <div className={styles.formGroup}>
            <label htmlFor="username">用户名</label>
            <input
              type="text"
              id="username"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              placeholder="请输入用户名"
              required
            />
          </div>
          
          <div className={styles.formGroup}>
            <label htmlFor="password">密码</label>
            <input
              type="password"
              id="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              placeholder="请输入密码"
              required
            />
          </div>
          
          <div className={styles.formOptions}>
            <div className={styles.rememberMe}>
              <input type="checkbox" id="remember" />
              <label htmlFor="remember">记住我</label>
            </div>
            <a href="#" className={styles.forgotPassword}>忘记密码?</a>
          </div>
          
          <button type="submit" className={styles.loginButton} disabled={isLoading}>
            {isLoading ? (
              <span className={styles.buttonLoader}></span>
            ) : (
              '登录'
            )}
          </button>
        </form>
        
        <div className={styles.formFooter}>
          <p>© 2023 管理系统. 保留所有权利.</p>
          <p className={styles.demoAccount}>演示账号: admin / admin123</p>
        </div>
      </div>
    </div>
  );
};

export default Login;